<template>
  <div class="container-headnav">
    <div class="top-nav">
      <div class="flex flex-center width-40 height-33" @click="topBack"
        :style="{ paddingTop: statusBarTop + 'px', height: spaceBarHeight + 'px' }">
        <img class="width-19 height-26" v-if="fileSpace" mode="widthFix"
             :src="fileSpace + '/images/w-icon-back-2.png'"/>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        spaceBarHeight: 0,
        statusBarTop: 0
      }
    },
    props: {
      backType: {
        type: Boolean,
        default: false
      }
    },
    onLoad() {
      this.spaceBarHeight = this.$pt.getSystemInfoSync()['statusBarHeight'] + 13
      this.statusBarTop = this.$pt.getSystemInfoSync()['statusBarHeight'] + 6
    },
    mounted() {
    },
    methods: {
      topBack() {
        if (!this.backType) {
          this.$pt.reLaunch({ url: '/pages/home/main' })
        } else {
          this.$pt.navigateBack({ delta: -1 })
        }
      }
    }
  }
</script>

<style lang="less" scoped>
  // 顶部导航样式定义
  .user-bar{
    background: #fff;
    height: 36px;
    .avatar{
      width: 27px;
      height: 27px;
      border-radius: 50px;
      margin-right: 8px;
    }
    .icon-v{
      position: absolute;
      right: 4px;
      bottom: 0;
      width: 13px;
      height: 13px;
    }
    .dark-gray{
      color: #595959;
    }
  }
  .back-btn{
    position: fixed;
    left: 5px;
    top: 28px;
    width: 40px;
    height: 40px;
    z-index: 101;
    .back-align{
      height: 40px;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .iconfont{      
      font-size: 20px;
      font-weight: bold;
      transform:rotate(-180deg);
    }
  }
  .top-pro-name{
    position: fixed;
    left: 8px;
    top: 28px;
    z-index: 101;
  }
  .top-back{
    position: fixed;
    left: 0px;
    top: 28px;
    z-index: 101;
    padding: 8px 10px 8px 7px;
    .iconfont{      
      font-size: 20px;
      font-weight: bold;
      transform:rotate(180deg);
    }
  }
  .top-nav{
    // background: #ff642b;
    // box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
    // color: #fff;
    height: 100px;
    box-sizing: border-box;
    text-align: left;
    font-size: 12px;
    position: fixed;
    width: 100%;
    left: 0;
    top: 0;
    z-index: 100;
    .pic-bar{
      border-radius: 10em;
    }
    .top-txt{
      font-size: 12px;
    }
    .iconfont{
      margin-top: 3px;
      margin-left: 3px;
      font-size: 15px;
      transform:rotate(90deg);
      &.icon-next{
        margin-top: 0px;
        margin-left: 3px;
        font-size: 15px;
        transform:rotate(0deg);
        color: #292929;
      }
    }
  }
  .top-space{
    height: 64px;
  }
</style>
